<!DOCTYPE html>
<html>
<head>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/xm-select.js"></script>

<style type="text/css">
body, html{
		width: 100%;
		height: 100%;
	}
.selBtn {
		float:left;
		margin-left:18px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
.select{
float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
 .show{
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	margin-left:24px;
	margin-bottom: 20px;
} 

</style>
</head>
<body>
<div style="overflow-y: auto;overflow-x: hidden;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			<select class="form-control selectpicker" title="请选择年份" data-width="100px" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;margin-left:26px;">场景</label>
			<select class="form-control selectpicker" title="请选择场景" data-width="100px" id="scenario" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 30px;font-weight: normal;margin-left:26px;">天</label>
		    <select class="form-control selectpicker" title="请选择天" data-width="90px" id="selectday" style="float: left;margin-top: -3px;padding: 5px;width: 132px;font-weight: normal;margin-right:-20px;margin-left:-30px;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;left:21px;">~</label>
			<select class="form-control selectpicker" title="请选择天" data-width="90px" id="selecttoday" style="float: left;margin-top: -3px;padding: 5px;width: 132px;font-weight: normal;margin-left:-41px"></select>

			<button class="selBtn" onclick="select()">查询</button>
		</div>
	</div>
	
	<div id="yearRenewable"  class= "show" style="width: calc(100% - 40px);min-height: 272px;position: relative;">
	 <p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">运行位置图</span>
		</p>
	
	<div id="echars" style="width:100%;height:460px;display:inline-block;margin-top:-24px;margin-left:0px;margin-bottom:27px;"></div>
	</div>
	

</div>
</body>
<script type="text/javascript">
var projectId=this.getQueryString('projectId');
var colorList = ["#F01B2D", "#8FFAF7", "#b3ff61", "#f6fa00", "#fd6bff", "#00B0F0","#700508","#000000"];
var typenameList = ["火电", "水电", "风电", "光伏", "光热", "电储能充电","电储能放电", "负荷"];
$(function(){
	getyear();
})
function getyear(){
	$.ajax({
    	url : "../g/service/Sample/getPositionyear",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectedId = "";
            $.each(data.iyear, function(i,val){ 
            	$("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
            	if(i==0) selectedId = val;
            });
            $('#yearSel').selectpicker('refresh');
            $('#yearSel').selectpicker('val',selectedId);
         	$("#yearSel").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {
        		var yearid = $("#yearSel").selectpicker('val');
                getScenario(yearid);
        	});
            getScenario(selectedId);
            getDay();
        }
    })
}
function getScenario(yearid) {
	$.ajax({
    	url : "../g/service/Sample/getPositionScenario",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId, yearid:yearid }),
         success : function(data){
        	 var selectedId = "";
             $.each(data.scenario, function(i,val){ 
            	 $("#scenario").append("<option value ='"+val+"'>"+val+"</option>");
            	 if(i==0) selectedId = val;
             });
             $('#scenario').selectpicker('refresh');
             $('#scenario').selectpicker('val',selectedId);
         }
    })
}
function getDay(){
	$.ajax({
    	url : "../g/service/Sample/getPositionday",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId }),
         success : function(data){
        	 var selectday = $("#selectday");
        	 var selecttoday = $("#selecttoday");
             $.each(data, function(i,val){
            	 $.each(val,function(u,value){
            		 selectday.append("<option value ='"+value+"'>"+value+"</option>");
                     selecttoday.append("<option value ='"+value+"'>"+value+"</option>");
            	 })
                 $('#selectday').selectpicker('refresh');
                 $('#selecttoday').selectpicker('refresh');
                 $('#selectday').selectpicker('val', 1);
                 $('#selecttoday').selectpicker('val', 1);
             });
             chushihua();
         }
    })
}

    
    
    
function select(){
	var year = document.getElementById("yearSel").value;
	var scenario = document.getElementById("scenario").value;
	var ex2 = Number(document.getElementById("selecttoday").value);
	var ex1  = Number(document.getElementById("selectday").value);
	if(ex1 > ex2){
		alert("开始时间不能大于结束时间");
		return
	}
	getPowerdata(year,scenario,ex1,ex2);
}
function chushihua(){
	var year = document.getElementById("yearSel").value;
	var scenario = document.getElementById("scenario").value;
	var ex2 = Number(document.getElementById("selecttoday").value);
	var ex1  = Number(document.getElementById("selectday").value);
	if(ex1 > ex2){
		alert("开始时间不能大于结束时间");
		return
	}
   
	getPowerdata(year,scenario,ex1,ex2);
}   

function getPowerdata(year,scenario,ex1,ex2){
	var NameArr=[];
	var arr={};
	var dataList = [];
	var hour=[];
	$.ajax({
    	url : "../g/service/Sample/getPositiondata",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId,"scenario":scenario , "year":year,"ex1":ex1,"ex2":ex2}),
         success : function(data){
        	for(var item of data.powerData){
        		let type = item.unitname;
        		if(arr[type]){
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        		}else{
        			arr[type] = [];
        			arr[type+"name"] = [];
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        			NameArr.push(type);
        		}
        	};
        	for(var name of NameArr){
        		console.log(name);
        		hour = arr[name+"name"];
        		if(name=="负荷"){
            		dataList.push({"name":name,"data":arr[name], "type":'line',itemStyle:{color:colorList[typenameList.indexOf(name)]},
          		    	"showSymbol": false,"emphasis":{"focus":'series'}})
        		} else {
            		dataList.push({"name":name,"data":arr[name], "type":'line',itemStyle:{color:colorList[typenameList.indexOf(name)]},
          		    	"stack": 'Total',"showSymbol": false,"areaStyle":'{}',"emphasis":{"focus":'series'}})
        		}
        	}
        	var chartDom = document.getElementById('echars');
        	var myChart = echarts.init(chartDom);
        	var option;

        	option = {
        	  title: {
        	    text: ''
        	  },
        	  tooltip: {
        	    trigger: 'axis'
        	  },
        	  legend: {
        	    data: NameArr
        	  },
        	  grid: {
        	    left: '3%',
        	    right: '5%',
        	    bottom: '10%',
        	    containLabel: true
        	  },
        	  toolbox: {
        	    feature: {
        	      saveAsImage: {}
        	    }
        	  },
        	  xAxis: {
        		name:"天-时",
        	    type: 'category',
        	    boundaryGap: false,
        	    data: hour
        	  },
        	  yAxis: {
        		  name:'MW',
        		axisLine: {
        			show:false
        			},
        	    type: 'value'
        	  },
        	  dataZoom:[{
     		 　　　　type:"inside",//详细配置可见echarts官网
     		 　　　},
     		  {orient: "horizontal",
               show: this.zoomShow,//控制滚动条显示隐藏
               realtime: true, //拖动滚动条时是否动态的更新图表数据
               height: 25, //滚动条高度
               start: 0, //滚动条开始位置（共100等份）
               end: this.endValue,//滚动条结束位置
               bottom: "1.5%",
               }],
        	  series: dataList
        	};

        	option && myChart.setOption(option);
    		window.addEventListener("resize", () => {
    			if(myChart){
    				myChart.resize()
    			}
    		})
             }});

         }
function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}
</script>
</html>